<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #container {
      width: 100vw;
      height: 100vh;
    }
  </style>

  <body>
    <div id="container"></div>
  </body>

  <script type="importmap">
    {
      "imports": {
        "three": "./build/three.module.js",
        "three/addons/": "./jsm/"
      }
    }
  </script>
  <script type="module">
    import * as THREE from "three";
    import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";
    import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
    import { OrbitControls } from "three/addons/controls/OrbitControls.js";
    import { EXRLoader } from "three/addons/loaders/EXRLoader.js";
    import Stats from "three/addons/libs/stats.module.js";

    const sonView = document.getElementById("container");
    const width = window.innerWidth;
    const height = window.innerHeight;

    let scene = new THREE.Scene();
    let camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    camera.position.set(0, 40, 80);
    let renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);
    sonView.appendChild(renderer.domElement);
    let controls = new OrbitControls(camera, renderer.domElement);
    let loader = new GLTFLoader();
    let dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath("/threejs/draco/");
    loader.setDRACOLoader(dracoLoader);
    let cat = null;
    loader.load("/model/cat.glb", (gltf) => {
      cat = gltf.scene;
      scene.add(gltf.scene);
    });
    let device = null;
    loader.load("/model/device.glb", (gltf) => {
      device = gltf.scene;
      gltf.scene.scale.set(3, 3, 3);
      gltf.scene.position.set(0, -26, 0)
    });
    new EXRLoader().load("/threejs/exr/forest.exr", (texture) => {
      texture.mapping = THREE.EquirectangularReflectionMapping;
      scene.environment = texture;
    });
    let stats = new Stats();
    sonView.appendChild(stats.dom);
    let isComponentAlive = true;
    let animate = () => {
      if (!isComponentAlive) return;
      requestAnimationFrame(animate);
      stats.begin();
      renderer.render(scene, camera);
      controls.update();
      stats.end();
    };
    animate();
    window.onresize = () => {
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
      renderer.setSize(width, height);
    };

    // 展示车
    const showCar = () => {
      console.log('展示车')
      scene.remove(device);
      scene.add(cat);
    };

    // 展示设备
    const showDevice = () => {
      console.log('展示设备')
      scene.remove(cat);
      scene.add(device);
    };

    window.addEventListener("message", (e) => {
      if (e.origin === "http://localhost:5173") {
        switch (e.data) {
          case "cat":
            showCar();
            break;
          case "device":
            showDevice();
            break;
          default:
            break;
        }
      }
    });
  </script>
</html>
